<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染基础</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id = "app">
      <!--循环遍历数组中的每个元素-->
        <ul v-for="(item,index) in peoples " :key="index">
          <li>{{item.name}}- {{item.age}}</li>
        </ul>
      <!--循环遍历对象中的每个属性的键值对-->
        <div v-for="(value, key) in box" :key="key">
          {{ key }}：{{ value }}
        </div>
      <!--循环遍历字符串中的每个字符-->
        <div v-for="(value, index) in address" :key="index">
          {{address[index]}}
        </div>
      <!--循环遍历指定次数-->
        <div v-for="n in 5" :key="n">
          第 {{ n }} 次循环
        </div>

    </div>
</body>
<!--
    v-for指令
      1.用于展示列表数据
      2.语法:v-for="(每个元素,索引值) in 遍历对象" key="唯一标识"
      3.可遍历:数组、对象、字符串(用的很少),指定次数(用的很少)

-->
<script>
    new Vue({
      el: '#app',
      data: {
          peoples: [{name: "张三",age:19},{name: "李四",age:18},{name: "王五",age:20},{name: "赵六",age:17}],
          box:{
            width:100,
            height:200,
            backgroundColor:"red"
          },
          address:"beijing"
      }
    })
</script>
</html>